import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: 60,
        backgroundColor: '#1e3a8a',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden',
    },
    headerBackground: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
    },
    headerContent: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        zIndex: 1,
        width: '100%',
        position: 'relative',
    },
    logo: {
        width: 32,
        height: 32,
        position: 'absolute',
        left: 20,
    },
    headerText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        flex: 1,
        textAlign: 'center',
    },
    content: {
        flex: 1,
        padding: 15,
        paddingTop: 0,
        backgroundColor: '#f8f9fa',
    },
    backButton: {
        position: 'absolute',
        left: 20,
        top: 14.5,
        zIndex: 2,
        width: 32,
        backgroundColor: '#ffffff',
        borderRadius: 16,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backIcon: {
        width: 24,
        height: 24,
    },
    contentArea: {
        flex: 1,
        padding: 10,
        paddingBottom: 20,
    },
    // 工序流程样式
    processFlow: {
        backgroundColor: '#ffffff',
        paddingVertical: 5,
        paddingHorizontal: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#e0e0e0',
        elevation: 2,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
    },
    processScrollView: {
        paddingHorizontal: 10,
    },
    processRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: '100%',
    },
    processItem: {
        alignItems: 'center',
        marginHorizontal: 10,
        minWidth: 70,
    },
    processIcon: {
        width: 50,
        height: 50,
        borderRadius: 8,
        backgroundColor: '#f0f0f0',
    },
    processName: {
        fontSize: 12,
        color: '#333333',
        textAlign: 'center',
        marginTop: 5,
    },
    processArrow: {
        fontSize: 16,
        color: '#4CAF50',
        fontWeight: 'bold',
        marginHorizontal: 5,
    },
    currentProcessIndicator: {
        width: 0,
        height: 0,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderLeftWidth: 6,
        borderRightWidth: 6,
        borderTopWidth: 8,
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent',
        borderTopColor: '#f44336',
        alignSelf: 'center',
        marginTop: 2,
    },
    // 任务卡片样式
    taskCard: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 20,
        elevation: 3,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
    },
    taskHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 15,
    },
    taskHeaderText: {
        fontSize: 14,
        color: '#333333',
        fontWeight: 'bold',
    },
    kpiRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 20,
    },
    kpiItem: {
        alignItems: 'center',
        flex: 1,
    },
    kpiValue: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333333',
        marginBottom: 5,
    },
    kpiLabel: {
        fontSize: 12,
        color: '#666666',
        textAlign: 'center',
    },
    inputRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 15,
    },
    inputLabel: {
        fontSize: 14,
        color: '#333333',
        width: 80,
    },
    inputField: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#dddddd',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 8,
        fontSize: 14,
        backgroundColor: '#ffffff',
    },
    reportButton: {
        backgroundColor: '#1890ff',
        borderRadius: 8,
        paddingVertical: 12,
        alignItems: 'center',
        marginTop: 10,
    },
    reportButtonText: {
        fontSize: 16,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    // 底部按钮样式
    bottomButtons: {
        backgroundColor: '#ffffff',
        paddingVertical: 15,
        paddingHorizontal: 15,
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
        elevation: 2,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: -1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
    },
    buttonRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    actionButton: {
        flex: 1,
        backgroundColor: '#1890ff',
        borderRadius: 6,
        paddingVertical: 10,
        alignItems: 'center',
        marginHorizontal: 2,
    },
    actionButtonGreen: {
        backgroundColor: '#4CAF50',
    },
    actionButtonRed: {
        backgroundColor: '#f44336',
    },
    actionButtonGray: {
        backgroundColor: '#cccccc',
    },
    actionButtonText: {
        fontSize: 12,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    loadingText: {
        fontSize: 16,
        color: '#666666',
        textAlign: 'center',
        marginTop: 20,
    },
    dataText: {
        fontSize: 16,
        color: '#666666',
        textAlign: 'center',
        marginTop: 20,
    },
    // 表格样式
    tableContainer: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        elevation: 3,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        overflow: 'hidden',
    },
    tableHeader: {
        flexDirection: 'row',
        backgroundColor: '#e3f2fd',
        paddingVertical: 12,
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#e0e0e0',
    },
    tableHeaderCell: {
        flex: 1,
        fontSize: 12,
        fontWeight: 'bold',
        color: '#333333',
        textAlign: 'center',
        borderRightWidth: 1,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    tableBody: {
        maxHeight: 400,
    },
    tableRow: {
        flexDirection: 'row',
        paddingVertical: 10,
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        backgroundColor: '#ffffff',
    },
    tableCell: {
        flex: 1,
        fontSize: 11,
        color: '#333333',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 1,
        borderRightColor: '#e0e0e0',
        paddingHorizontal: 4,
    },
    inspectButton: {
        backgroundColor: '#1890ff',
        borderRadius: 4,
        paddingHorizontal: 8,
        paddingVertical: 4,
        minWidth: 50,
    },
    inspectButtonText: {
        fontSize: 10,
        color: '#ffffff',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    // 模态框样式
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContainer: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 20,
        margin: 20,
        width: '60%',
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333333',
        textAlign: 'center',
        marginBottom: 10,
    },
    modalInputContainer: {
        marginBottom: 20,
    },
    modalInput: {
        borderWidth: 1,
        borderColor: '#dddddd',
        borderRadius: 8,
        paddingHorizontal: 12,
        paddingVertical: 10,
        fontSize: 16,
        backgroundColor: '#ffffff',
    },
    modalButtonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    modalButton: {
        flex: 1,
        paddingVertical: 12,
        borderRadius: 8,
        alignItems: 'center',
        marginHorizontal: 5,
    },
    modalCancelButton: {
        backgroundColor: '#f0f0f0',
        borderWidth: 1,
        borderColor: '#cccccc',
    },
    modalConfirmButton: {
        backgroundColor: '#1890ff',
    },
    modalCancelButtonText: {
        fontSize: 16,
        color: '#666666',
        fontWeight: 'bold',
    },
    modalConfirmButtonText: {
        fontSize: 16,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    viewImageText: {
        fontSize: 12,
        color: '#1890ff',
        textDecorationLine: 'underline',
    },
    // 图片预览模态框样式
    imageModalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imageModalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    previewImage: {
        width: '90%',
        height: '80%',
        borderRadius: 8,
    },
    closeImageButton: {
        position: 'absolute',
        top: 50,
        right: 20,
        width: 40,
        height: 40,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    closeImageButtonText: {
        fontSize: 24,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    // 交接按钮样式
    handoverButton: {
        backgroundColor: '#1890ff',
        borderRadius: 6,
        paddingVertical: 10,
        paddingHorizontal: 20,
        alignSelf: 'flex-start',
        marginBottom: 10,
    },
    handoverButtonText: {
        fontSize: 16,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    // 交接模态框样式
    handoverImageContainer: {
        marginBottom: 20,
    },
    handoverImageTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333333',
        marginBottom: 10,
    },
    handoverImagesRow: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 10,
    },
    handoverImageItem: {
        position: 'relative',
    },
    handoverUploadedImage: {
        width: 80,
        height: 80,
        borderRadius: 8,
    },
    handoverRemoveImageButton: {
        position: 'absolute',
        top: -5,
        right: -5,
        width: 20,
        height: 20,
        backgroundColor: '#ff4444',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    handoverRemoveImageText: {
        fontSize: 14,
        color: '#ffffff',
        fontWeight: 'bold',
    },
    handoverUploadArea: {
        width: 80,
        height: 80,
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#e0e0e0',
        borderStyle: 'dashed',
    },
    handoverUploadText: {
        fontSize: 24,
        color: '#999999',
        fontWeight: 'bold',
    },
    handoverUploadSubText: {
        fontSize: 10,
        color: '#999999',
        marginTop: 2,
    },
}); 